<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="1200"
    switchFullscreen
    @cancel="handleCancel1"
    @ok="handleOk"
  >
    <div>
      <h1>订单信息</h1>
      <table class="tatable" border="1">
        <tr>
          <td class="TdTitle">卖方信息</td>
          <td class="TdContent" v-if="orderList !== null && orderList.enterpriseName !== '' ">
            <span class="contentList">
              企业名称：{{ orderList.enterpriseName }}<br/>
              销售区域：{{ orderList.region }}<br/>
              社会信用统一代码：{{ orderList.enterpriseId }}<br/>
              销售地址：{{ orderList.businessAddress }}<br/>
              销售顾问：{{ orderList.salesName }}<br/>
              顾问手机号：{{ orderList.salesPhone }}
            </span>
          </td>
          <td class="TdContent" v-else>暂无信息</td>
          <td class="TdTitle">买方信息</td>
          <td class="TdContent">
            <span class="contentList">
              姓名：{{ orderList.ownerName }}<br/>
              证件类型：{{ orderList.documentType }}<br/>
              证件号码：{{ orderList.documentNumber }}<br/>
              手机号码：{{ orderList.ownerPhone }}<br/>
            </span>

          </td>
        </tr>
        <tr>
          <td class="TdTitle">价格信息</td>
          <!--        <td class="TdContent">{{ (orderList.carPrice == null || orderList.carPrice == ''?'无' : orderList.carPrice)}}</td>-->
          <td class="TdContent">
            <span class="contentList">
              订/定金金额：{{ orderList.epositAmount }}<br/>
              订单总价：{{ orderList.quoteAmount }}<br/>
              <!--          quoteAmount报价金额-->
              订/定金性质：{{ orderList.depositAttribute }}<br/>
              订/定金描述：{{ orderList.depositContent }}<br/>
              </span>
          </td>
          <td class="TdTitle">车辆信息</td>
          <td class="TdContent">
          <span class="contentList">
            品牌：{{ orderList.carBrand }}<br/>
            汽车车型：{{ orderList.carModel }}<br/>
            车辆类型：{{ orderList.carType }}<br/>
            车辆配置：{{ orderList.carTypeConfiguration }}<br/>
            车辆燃料类型：{{ orderList.fuelType }}<br/>
            车架号(Vin码)：{{ orderList.carVin }}<br/>
            外饰颜色：{{ orderList.carColor }}<br/>
            内饰颜色：{{ orderList.interiorColor }}<br/>
            是否为新车：{{ orderList.isNewCar }}<br/>
            发动机号：{{ orderList.engineNumber }}<br/>
            合格证号：{{ orderList.qualifiedNumber }}<br/>
            动力蓄电池组编号：{{ orderList.batteryNumber }}<br/>
            货物进口证明书号：{{ orderList.importProveNumber }}<br/>
            进口机动车辆随车检验单号：{{ orderList.importEngineNumber }}<br/>
            </span>
          </td>
        </tr>
        <tr>
          <td class="TdTitle">是否确认</td>
          <td class="TdContent" v-if="orderList.confirmStatus == 0">待确认</td>
          <td class="TdContent" v-if="orderList.confirmStatus == 1">未确认</td>
          <td class="TdContent" v-if="orderList.confirmStatus == 2">已确认</td>
          <td class="TdContent" v-if="orderList.confirmStatus == 3">异议</td>
          <td class="TdContent" v-if="orderList.confirmStatus == 4">异议待确认</td>
          <td class="TdTitle">异议内容</td>
          <td class="TdContent">
            {{
              (orderList.objectionContents == null || orderList.objectionContents == '') ? '无' : orderList.objectionContents
            }}
          </td>
        </tr>
      </table>

      <h1 style="margin-top: 10px">合同信息</h1>
      <table class="tatable" border="1" v-if="record.links == '1' || record.links == '2'">
        <tr>
          <td class="TdTitle">卖方信息</td>
          <td class="TdContent">
            <span class="contentList">
              企业名称：{{ contractList.enterpriseName }}<br/>
              销售区域：{{ contractList.region }}<br/>
              社会信用统一代码：{{ contractList.enterpriseId }}<br/>
              销售地址：{{ contractList.businessAddress }}<br/>
              销售顾问：{{ contractList.salesName }}<br/>
              顾问手机号：{{ contractList.salesPhone }}
            </span>
          </td>
          <td class="TdTitle">买方信息</td>
          <td class="TdContent">
            <span class="contentList">
              姓名：{{ orderList.ownerName }}<br/>
              证件类型：{{ orderList.documentType }}<br/>
              证件号码：{{ orderList.documentNumber }}<br/>
              手机号码：{{ orderList.ownerPhone }}<br/>
            </span>
          </td>
        </tr>
        <tr>
          <td class="TdTitle">交易信息</td>
          <td class="TdContent">
            <div class="contentList">
              交易总价：{{ contractList.finalPrice }}<br/>
              车辆总价：{{ contractList.carPrice }}<br/>
              付款类型：{{ contractList.paytype == '1' ? '按揭' : '一次性付款' }}<br/>
              支付方式：{{ contractList.paymentMethod }}<br/>
              <div v-for="(item, index) in contractList.paymentMethodJson" :key="index"
                   v-if="contractList.paymentMethodJson !== null || contractList.paymentMethodJson !== ''">
                <span>金额：{{ item.paymentAmount | filterPaymentAmount }}</span><br/>
                <span>付款时间：{{ item.paymentDate | filterPaymentDate }}</span><br/>
              </div>
              <div v-else-if="contractList.paymentMethodJson == null || contractList.paymentMethodJson == ''">
                <span>金额：暂无信息</span><br/>
                <span>付款时间：暂无信息</span><br/>
              </div>
            </div>
          </td>
          <td class="TdTitle">发票信息</td>
          <!--        待定-->
          <td class="TdContent">
            <span class="contentList">
              开票时间：{{ contractList.invoiceTime }}<br/>
              发票代码：{{ contractList.invoiceCode }}<br/>
              发票号码：{{ contractList.invoiceNumber }}<br/>
              不含税价：{{ contractList.excludingTaxPrice }}<br/>
              税价合计：{{ contractList.finalPrice }}<br/>
              <!--finalPrice总价-->
            </span>
          </td>
        </tr>
        <tr>
          <td class="TdTitle">交付信息</td>
          <td class="TdContent" >
            <span class="contentList">
              预计交付方式：{{ contractList.deliveryAddr }}<br/>
              预计交车地点：{{ contractList.deliveryMethod }}<br/>
              预计交车时间：{{ contractList.deliveryTime }}<br/>
            </span>
          </td>
          <td class="TdTitle">车辆信息</td>
          <td class="TdContent">
            <span class="contentList">
              品牌：{{ contractList.carBrand }}<br/>
              汽车车型：{{ contractList.carModel }}<br/>
              车辆类型：{{ contractList.carType }}<br/>
              车辆配置：{{ contractList.carTypeConfiguration }}<br/>
              车辆燃料类型：{{ contractList.fuelType }}<br/>
              车架号(Vin码)：{{ contractList.carVin }}<br/>
              外饰颜色：{{ contractList.carColor }}<br/>
              内饰颜色：{{ contractList.interiorColor }}<br/>
              是否为新车：{{ contractList.isNewCar }}<br/>
              发动机号：{{ contractList.engineNumber }}<br/>
              合格证号：{{ contractList.qualifiedNumber }}<br/>
              动力蓄电池组编号：{{ contractList.batteryNumber }}<br/>
              货物进口证明书号：{{ contractList.importProveNumber }}<br/>
              进口机动车辆随车检验单号：{{ contractList.importEngineNumber }}<br/>
            </span>
          </td>
        </tr>
        <tr>
          <td class="TdTitle">代办信息</td>
          <td class="TdContent">{{ contractList.agentContents }}</td>
          <td class="TdTitle">是否确认</td>
          <td class="TdContent" v-if="contractList.confirmStatus == 0">待确认</td>
          <td class="TdContent" v-if="contractList.confirmStatus == 1">未确认</td>
          <td class="TdContent" v-if="contractList.confirmStatus == 2">已确认</td>
          <td class="TdContent" v-if="contractList.confirmStatus == 3">异议</td>
          <td class="TdContent" v-if="contractList.confirmStatus == 4">异议待确认</td>
        </tr>
        <tr>
          <td class="TdTitle">异议内容</td>
          <td class="TdContent">{{ contractList.objectionContents }}</td>
          <td class="TdTitle"></td>
          <td class="TdContent"></td>
        </tr>
      </table>
      <div v-else class="emptyBox">
        <a-empty description="合同信息待上传"/>
      </div>

      <h1 style="margin-top: 10px">交车提醒</h1>
      <table class="tatable" border="1"  v-if="record.links == '2'">
        <tr>
          <td class="TdTitle">交车信息</td>
          <td class="TdContent">{{ deliveryList.deliveryTime }}{{ deliveryList.deliverContents }}</td>
          <td class="TdTitle">交付专员</td>
          <td class="TdContent">{{ deliveryList.salesName }}</td>
        </tr>
        <tr>
          <td class="TdTitle">提车人员</td>
          <td class="TdContent">{{ deliveryList.buyerName }}</td>
          <td class="TdTitle">发票信息</td>
          <td class="TdContent">
             <span class="contentList">
              开票时间：{{ deliveryList.invoiceTime }}<br/>
              发票代码：{{ deliveryList.invoiceCode }}<br/>
              发票号码：{{ deliveryList.invoiceNumber }}<br/>
              不含税价：{{ deliveryList.excludingTaxPrice }}<br/>
              税价合计：{{ deliveryList.finalPrice }}<br/>
               <!--finalPrice总价-->
            </span>
          </td>
        </tr>
        <tr>
          <td class="TdTitle">车辆信息</td>
          <td class="TdContent">
            <span class="contentList">
            品牌：{{ deliveryList.carBrand }}<br/>
            汽车车型：{{ deliveryList.carModel }}<br/>
            车辆类型：{{ deliveryList.carType }}<br/>
            车辆配置：{{ deliveryList.carTypeConfiguration }}<br/>
            车辆燃料类型：{{ deliveryList.fuelType }}<br/>
            车架号(Vin码)：{{ deliveryList.carVin }}<br/>
            外饰颜色：{{ deliveryList.carColor }}<br/>
            内饰颜色：{{ deliveryList.interiorColor }}<br/>
            是否为新车：{{ deliveryList.isNewCar }}<br/>
            发动机号：{{ deliveryList.engineNumber }}<br/>
            合格证号：{{ deliveryList.qualifiedNumber }}<br/>
            动力蓄电池组编号：{{ deliveryList.batteryNumber }}<br/>
            货物进口证明书号：{{ deliveryList.importProveNumber }}<br/>
            进口机动车辆随车检验单号：{{ deliveryList.importEngineNumber }}<br/>
            </span>
          </td>
          <td class="TdTitle">交付清单</td>
          <td class="TdContent">{{ deliveryList.deliverContents }}</td>
        </tr>
        <tr>
          <td class="TdTitle">随车附件</td>
          <td class="TdContent">{{ deliveryList.accessoriesContents }}</td>
          <td class="TdTitle">是否确认</td>
          <td class="TdContent" v-if="deliveryList.confirmStatus == 1">未确认</td>
          <td class="TdContent" v-if="deliveryList.confirmStatus == 2">已确认</td>
          <td class="TdContent" v-if="deliveryList.confirmStatus == 3">异议</td>
          <td class="TdContent" v-if="deliveryList.confirmStatus == 4">异议待确认</td>
        </tr>
        <tr>
          <td class="TdTitle">异议内容</td>
          <td class="TdContent" v-if="deliveryList.objectionContents">
            {{ deliveryList.objectionContents }}
          </td>
          <td class="TdTitle" v-else>无</td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <div v-else class="emptyBox">
        <a-empty description="交付信息待上传"/>
      </div>

      <div v-if="iscallList == true">
        <h1 style="margin-top: 10px">咨询历史</h1>
        <table class="tatable" border="1">
          <tr>
            <td class="TdTitle">来电姓名</td>
            <td class="TdContent">{{ callList.name }}</td>
            <td class="TdTitle">来电号码</td>
            <td class="TdContent">{{callList.phone}}</td>
          </tr>
          <tr>
            <td class="TdTitle">咨询类型</td>
            <td class="TdContent">{{ callList.call_type }}</td>
            <td class="TdTitle">来电时间</td>
            <td class="TdContent">{{callList.create_time}}</td>
          </tr>
          <tr>
            <td class="TdTitle">办理状态</td>
            <td class="TdContent">{{ callList.status }}</td>
            <td class="TdTitle">咨询内容</td>
            <td class="TdContent">{{detail.content}}</td>
          </tr>
          <tr>
            <td class="TdTitle">答复内容</td>
            <td class="TdContent">{{ detail.reply }}</td>
            <td class="TdTitle"> 备注</td>
            <td class="TdContent">{{detail.remark}}</td>
          </tr>
        </table>
      </div>



      <h1 style="margin-top: 10px">新增咨询记录</h1>
      <a-card :bordered="false" style="padding-top:0!important;">
        <a-form :form="form">
          <a-row>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电姓名">
                <a-input
                  v-decorator="['name', { rules: [{ required: true, message: '请输入来电姓名' }] }]"
                  placeholder="请输入来电姓名"
                />
              </a-form-item>
            </a-col>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电号码">
                <a-input
                  v-decorator="['phone', { rules: [{ required: true, message: '请输入来电号码' }] }]"
                  placeholder="请输入来电号码"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="咨询类型">
                <a-select
                  v-decorator="['callType', { rules: [{ required: true, message: '请选择咨询类型' }] }]"
                  placeholder="请选择咨询类型"
                >
                  <a-select-option
                    v-for="item in consultationType"
                    :key="item.key"
                    :value="item.key"
                  >{{ item.value }}
                  </a-select-option>
                </a-select>
                <!--                <a-input-->

                <!--                  v-model="callList.call_type"-->

                <!--                  placeholder="暂无咨询类型"-->

                <!--                />-->
              </a-form-item>
            </a-col>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电时间">
<!--                <a-input-->
<!--                  v-model="callList.call_time"-->
<!--                  placeholder="请输入来电时间"-->
<!--                />-->
                <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss'
                               v-decorator="['callTime', {initialValue: currentTime,rules: [{ required: true, message: '请选择来电时间'}] }]"
                               style="width: 100%"/>
<!--                <a-date-picker-->
<!--                  :value="callList.call_time == '' ? null : moment(callList.call_time)"-->
<!--                  format="YYYY-MM-DD HH:mm:ss"-->
<!--                  style="width: 100%"-->
<!--                  @change="callList.call_time = $event == null ? '' : $event.format('YYYY-MM-DD HH:mm:ss')"-->
<!--                />-->
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="办理状态">
                <a-select
                  v-decorator="['status', { rules: [{ required: true, message: '请选择办理状态' }] }]"
                  placeholder="请选择办理状态"
                >
                  <a-select-option
                    v-for="item in handlingStatus"
                    :key="item.key"
                    :value="item.key"
                  >{{ item.value }}
                  </a-select-option>
                </a-select>
                <!--                <a-input-->
                <!--                  v-model="callList.status"-->
                <!--                  placeholder="暂无办理状态"-->
                <!--                />-->
              </a-form-item>
            </a-col>

          </a-row>
          <a-row>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="咨询内容">
                <a-textarea v-decorator="['content', { rules: [{ required: false, message: '请输入咨询内容' }] }]"
                            placeholder="请输入咨询内容" :rows="4"
                            style="margin-top: 5px;"/>
              </a-form-item>
            </a-col>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="答复内容">
                <a-textarea v-decorator="['reply', { rules: [{ required: false, message: '请输入答复内容' }] }]"
                            placeholder="请输入答复内容" :rows="4"
                            style="margin-top: 5px;"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :sm="12" :xs="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
                <a-textarea v-decorator="['remark', { rules: [{ required: false, message: '请输入备注' }] }]"
                            placeholder="请输入备注" :rows="4"
                            style="margin-top: 5px;"/>
              </a-form-item>
            </a-col>
          </a-row>

        </a-form>
        <a-row class="BottomButtons">

        </a-row>


      </a-card>

    </div>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { getAction, httpAction, postAction, putAction } from '@api/manage'
import moment from 'moment'

export default {
  name: 'signCheckDetail',
  data() {
    return {
      moment,
      model: {},
      getList: {},
      callList: {},
      iscallList: false,
      detail: {},
      orderList: {},
      contractList: {},
      deliveryList: {},
      backup: {},
      form: this.$form.createForm(this),
      record: '',
      currentTime: '',
      isDestroy: false,
      confirmLoading: false,
      visible: false,
      title: '详情',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      url: {
        edit: '/cxm/cxmCallInfoDetail/edit'
      },
      consultationType: [
        {
          key: 0,
          value: '购车前的网签咨询'
        }, {
          key: 1,
          value: '订单'
        }, {
          key: 2,
          value: '合同'
        }, {
          key: 3,
          value: '交付'
        }, {
          key: 4,
          value: '网签后的售后服务'
        }, {
          key: 5,
          value: '其他'
        }
      ],
      handlingStatus: [
        {
          key: 0,
          value: '待处理'
        }, {
          key: 1,
          value: '已处理'
        }
      ]
    }
  },
  created() {
    this.getCurrentData()
  },
  methods: {
    // show(record) {
    //   this.record = record
    //   this.visible = true
    //
    // },
    getCurrentData() {
      if (this.currentTime === '') {
        this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.swichbutton = '1'
      this.isDestroy = true
      this.form.resetFields()
      // that.$parent.loadData()

    },
    handleCancel1() {
      this.close()

    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {

        if (!err) {
          that.confirmLoading = true
          // 时间格式化
          if (values.callTime) {
            if (typeof (values.callTime) === 'object') {
              values.callTime = values.callTime.format('YYYY-MM-DD HH:mm:ss')
              console.log(values.callTime)
            }
          }
          let formData = Object.assign(this.model, values)
          formData.orderId = this.orderList.id

          formData.enterpriseName = this.orderList.enterpriseName

          let httpurl = '/cxm/cxmCallInfo/addCallInfo'
          postAction(httpurl, formData)
            .then((res) => {
              console.log(res)
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              this.close()
            })
        }
      })
    },

    // 打开modal
    edit(record) {
      this.$set(this.model, 'orderMessage', {})
      this.record = record
      console.log(record)
      // console.log(this.record.links)
      // console.log(record.orderId)
      let httpurl = '/cxm/cxmCallInfo/getCallInfoByOrderId' + '?orderId=' + record.orderId
      getAction(httpurl, {})
        .then((res) => {
          if (res.success) {
            console.log(res)
            this.getList = Object.assign({}, res.result)
            // console.log(this.getList)
            if (this.getList.orderMessage == null) {
              this.$message.warn('暂无数据')
              this.visible = false
            } else if (this.getList.contractMessage == null) {
              this.$message.warn('暂无数据')
              this.visible = false
            } else if (this.getList.deliverMessage == null) {
              this.$message.warn('暂无数据')
              this.visible = false
            }

            // console.log(this.getList)
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
        this.model = Object.assign({}, this.getList)
        // console.log(this.model)

        // 订单orderMessage
        if (this.model.orderMessage !== null) {
          this.orderList = Object.assign({}, this.model.orderMessage)
          if (this.orderList.documentType !== null) {
            if (this.orderList.documentType === '1') {
              this.orderList.documentType = '身份证'
            }
          } else if (this.orderList.documentType !== null) {
            if (this.orderList.documentType === '2') {
              this.orderList.documentType = '护照'
            }
          } else if (this.orderList.documentType !== null) {
            if (this.orderList.documentType === '3') {
              this.orderList.documentType = '士兵证军官证'
            }
          } else if (this.orderList.documentType !== null) {
            if (this.orderList.documentType === '5') {
              this.orderList.documentType = '台胞证'
            }
          }
          if (this.orderList.isNewCar !== null) {
            if (this.orderList.isNewCar === '1') {
              this.orderList.isNewCar = '是'
            } else if (this.orderList.isNewCar === '0') {
              this.orderList.isNewCar = '不是'
            }
          }

        }
        // 合同contractMessage
        if (this.model.contractMessage !== null) {

          this.contractList = Object.assign({}, this.model.contractMessage)
        }
        // 交付deliverMessage
        if (this.model.deliverMessage !== null) {
          this.deliveryList = Object.assign({}, this.model.deliverMessage)
        }

        // 咨询记录callMessage
        if (this.model.callMessage.length > 0) {
          this.callList = Object.assign({}, this.model.callMessage[0])
          this.detail = Object.assign({}, this.callList.detail[0])
          this.iscallList = true
          console.log(this.callList)
          switch (this.callList.call_type) {
            case '0':
              this.callList.call_type = '购车前的网签咨询'
              break
            case '1':
              this.callList.call_type = '订单'
              break
            case '2':
              this.callList.call_type = '合同'
              break
            case '3':
              this.callList.call_type = '交付'
              break
            case '4':
              this.callList.call_type = '网签后的售后服务'
              break
            case '5':
              this.callList.call_type = '其他'
              break
          }
          switch (this.callList.status) {
            case '0':
              this.callList.status = '待处理'
              break
            case '1':
              this.callList.status = '已处理'
              break
          }

          // 回显
          // this.$nextTick(() => {
          //
          //   this.form.setFieldsValue({
          //     name: this.callList.name,
          //     phone: this.callList.phone,
          //     callType: this.callList.call_type,
          //     callTime: this.callList.call_time,
          //     status: this.callList.status,
          //     content: this.detail.content,
          //     reply: this.detail.reply,
          //     remark: this.detail.remark
          //   })
          //
          // })
        }else {
          this.iscallList = false
        }


      })

      // this.form.resetFields()
      // this.model = Object.assign({}, record)
      // console.log(this.model)
      this.visible = true
      this.isDestroy = false

    }
  },
  filters: {
    filterPaymentMethod(paymentMethod) {
      switch (paymentMethod) {
        case '1':
          return '刷卡'
        case '2':
          return '转账'
        case '3':
          return '支票'
        case '4':
          return '现金'
        case '5':
          return '微信'
        case '6':
          return '支付宝'
        case '7':
          return '银行承兑汇票'
        case '8':
          return '预付'
        case '9':
          return '本票'
        case '10':
          return '会员电子账户'
        case '11':
          return '门店储值卡'
        case '13':
          return '券支付'
        case '14':
          return '电汇'
        case '15':
          return '挂账'
        case '16':
          return '公户'
        default:
          return paymentMethod
      }
    },
    filterPaymentAmount(paymentMethod) {
      return paymentMethod + '元'
    },
    filterPaymentDate(paymentDate) {
      return new Date(new Date(paymentDate).getTime()).toLocaleString()
    }
  }
}

</script>

<style scoped>
.tatable {
  border: 1px solid #888888;
  border-collapse: collapse;
  width: 1050px;
  padding: 10px;
  border-radius: 4px;
  margin-left: 30px;
}

.tatable td {
  padding:  10px 10px 10px 10px;

}


.TdTitle {
  width: 95px;
  text-align: center;
}

.TdContent {
  width: 330px;
}

.contentList {
  line-height: 30px;
}

.emptyBox{
  /*border:solid 1px #lightgrey;*/
  border-radius:4px;
}

h1{
  padding-left: 3%;
}


</style>